<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <fieldset>

        <form action="tianzhuan.html" method="" id="form1">
            <p><label for="">姓名：</label><input type="text" class="username" value="请输入用户名"><span></span></p>
            <hr>
            <p><label for="">密码：</label><input type="text" class="password1" value="请输入密码"><span></span></p>
            <hr>
            <p><label for="">确认密码：</label><input type="text" class="password2" value="请再次输入密码"><span></span></p>
            <hr>
            <p><label for="">电子邮箱：</label><input type="text" class="exe" value="请输入电子邮箱"><span></span></p>
            <hr>
            <p><input type="submit" value="提交">
                <input type="reset" name="" id="" value='取消' class="reset">
            </p>
        </form>
    </fieldset>
</body>

</html>
<script>
    let form1 = document.querySelector('#form1');
    let username = document.querySelector('.username');
    let password1 = document.querySelector('.password1');
    let password2 = document.querySelector('.password2');
    let exe = document.querySelector('.exe');
    let reset = document.querySelector('.reset');
    let aSpan = document.querySelectorAll('#form1 span');

    let userflag = true;
    let exeflag = true;
    let pass1flag = true;
    let pass2flag = true;


    username.onfocus = function() {
        this.value = '';
        if (this.value === "请输入用户名") {
            this.value = ''
        } else {
            this.value = this.value
        }
        aSpan[0].innerHTML = '长度2-12个字符';
        aSpan[0].style.color = '#333';
    }

    username.onblur = function() {
        if (this.value !== '') {
            let len = this.value.length;
            if (len <= 12 && len >= 2) {
                aSpan[0].innerHTML = '√';
                aSpan[0].style.color = 'green';
                userflag = true;
            } else {
                aSpan[0].innerHTML = '用户名长度不对';
                aSpan[0].style.color = 'red';
                userflag = false;
            }
        } else {
            aSpan[0].innerHTML = '用户名不能为空';
            aSpan[0].style.color = 'red';
            userflag = false;
        }
    }


    password1.onfocus = function() {
        aSpan[1].innerHTML = '请输入6-12位组成的密码';
        aSpan[1].style.color = '#333';
        if (this.value === "请输入密码") {
            this.value = ''
        } else {
            this.value = this.value
        }
    };

    //新的事件：oninput事件，当文本框内容发生改变立刻触发

    password1.oninput = function() { //检测弱中强

        var reg1 = /[0-9]+/; //数字
        var reg2 = /[a-z]+/; //小写字母
        var reg3 = /[A-Z]+/; //大写字母
        var reg4 = /[\W\_]+/; //特殊字符
        var count = 0; //统计字符的种类
        if (reg1.test(this.value)) {
            count++;
        }
        if (reg2.test(this.value)) {
            count++;
        }
        if (reg3.test(this.value)) {
            count++;
        }
        if (reg4.test(this.value)) {
            count++;
        }

        switch (count) {
            case 1:
                aSpan[1].innerHTML = '弱：有被盗风险，建议使用字母、数字和符号两种及以上组合';
                aSpan[1].style.color = 'red';
                pass1flag = false;
                break;
            case 2:
            case 3:
                aSpan[1].innerHTML = '中:有被盗风险，建议使用字母、数字和符号两种及以上组合';
                aSpan[1].style.color = 'orange';
                pass1flag = true;
                break;
            case 4:
                aSpan[1].innerHTML = '强:你的密码很安全';
                aSpan[1].style.color = 'green';
                pass1flag = true;
                break;
        }

    };


    password1.onblur = function() {
        if (this.value !== '') {
            if (this.value.length >= 6 && this.value.length <= 12) { //检测长度
                if (pass1flag) {
                    aSpan[1].innerHTML = '√';
                    aSpan[1].style.color = 'green';
                }
            } else {
                aSpan[1].innerHTML = '密码长度必须是6-12位';
                aSpan[1].style.color = 'red';
                pass1flag = false;
            }

        } else {
            aSpan[1].innerHTML = '密码不能为空';
            aSpan[1].style.color = 'red';
            pass1flag = false;
        }
    };
    password2.onfocus = function() {
        aSpan[2].innerHTML = '两次密码需要相同';
        aSpan[2].style.color = '#333';
        if (this.value === "请再次输入密码") {
            this.value = ''
        } else {
            this.value = this.value
        }
    }
    password2.onblur = function() {
        if (this.value !== password1.value) {
            aSpan[2].innerHTML = '两次密码不一致'
            aSpan[2].style.color = 'red';
            pass2flag = false;
        } else {
            aSpan[2].innerHTML = '√'
            aSpan[2].style.color = 'green ';
            pass2flag = true;
        }
    }



    exe.onfocus = function() {
        aSpan[3].innerHTML = '请输入正确的邮箱地址';
        aSpan[3].style.color = '#333';
        if (this.value === "请输入电子邮箱") {
            this.value = ''
        } else {
            this.value = this.value
        }
    }
    exe.onblur = function() {
        if (this.value !== '') {
            let reg = /^(\w[+-.]*\w+)\@(\w[-.]*\w+)\.(\w[-.]*\w+)$/;
            if (reg.test(this.value)) {

                aSpan[3].innerHTML = '√';
                aSpan[3].style.color = 'green';
                let exeflag = true;
            } else {
                aSpan[3].innerHTML = '邮箱范围错位';
                aSpan[3].style.color = 'red';
                let exeflag = false;
            }
        } else {
            aSpan[3].innerHTML = '用户名不能为空';
            aSpan[3].style.color = 'red';
            let exeflag = false;
        }
    }


    form1.onsubmit = function() {
        if (username.value === '' || username.value === "请输入用户名") {
            aSpan[0].innerHTML = '用户名不能为空';
            aSpan[0].style.color = 'red';
            userflag = false;
        }
        if (exe.value === '' || exe.value === "请输入电子邮箱") {
            aSpan[3].innerHTML = '邮箱不能为空';
            aSpan[3].style.color = 'red';
            exeflag = false;
        }
        if (password1.value === '' || password1.value === "请输入密码") {
            aSpan[1].innerHTML = '密码不能为空';
            aSpan[1].style.color = 'red';
            pass1flag = false;
        }
        if (password2.value === '' || password2.value === "请再次输入密码") {
            aSpan[2].innerHTML = '密码不能为空';
            aSpan[2].style.color = 'red';
            pass2flag = false;
        }
        if (!userflag || !exeflag || !pass1flag || !pass2flag) { //任何一个标记为false，阻止就会有效
            return false;
        }

    };
    // reset.onclick = function() {
    //     password1.value = ''
    // }
</script>